<script lang="ts" setup>
import { addDevice } from '@/api/device';
import { getRoomDeviceCollections } from '@/api/room';
import type { deviceDTO } from '@/props/device';
import type { roomDeviceCollections } from '@/props/room';
import { useDeviceStore } from '@/stores/device';
import { useRoomStore } from '@/stores/room';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue';

const deviceStore = useDeviceStore()

const requestPath = ["/lamp","/airConditioner","/fan"]

const deviceInformation = reactive<deviceDTO>({
  identificationCode:'',
  roomId:'',
  deviceName:'',
  deviceType:null,
  deviceRequestPath:'',
  roomDeviceId:''
})

const showOnPage = ref(false)

//房间名
const roomStore = useRoomStore()
const deviceTypeOptions = reactive([
  {deviceType:0,deviceTypeName:"灯"},
  {deviceType:1,deviceTypeName:"空调"},
  {deviceType:2,deviceTypeName:"风扇"},
])

onMounted(() => {
})

const roomOptions = roomStore.roomData

//获取设备集合类型
const roomDeviceCollections = reactive<roomDeviceCollections>([])
const getRoomDeviceCollectionsData = async(roomId:string) => {
  const {data} = await getRoomDeviceCollections(roomId)
  roomDeviceCollections.splice(0,roomDeviceCollections.length,...data.data)
}
watch(
  () => deviceInformation.roomId, // 这里返回一个getter函数，用于访问被监听的属性
  (newRoomId) => {
    if (newRoomId !== '') {
      getRoomDeviceCollectionsData(newRoomId); // 如果需要，可以进行类型断言
    }
  }
);

//添加设备
const addDeviceData = async () => {
  if(deviceInformation.deviceName==='' || deviceInformation.identificationCode==='' || deviceInformation.roomId === '' || deviceInformation.deviceType === null || deviceInformation.roomDeviceId === ''){
    ElMessage.error("缺少值")
    return
  }
  if(deviceInformation.deviceType===0) {
    deviceInformation.deviceRequestPath = requestPath[0]
  } else if(deviceInformation.deviceType===1) deviceInformation.deviceRequestPath = requestPath[1]
  else if(deviceInformation.deviceType===2) deviceInformation.deviceRequestPath = requestPath[2]

  const {data} = await addDevice(deviceInformation)
  if(data.code === 1){
    deviceStore.dialogDeivce += 1
    deviceStore.addDeiviceFormVisible = false
    ElMessage.success("设备添加成功")
    return
  }
  deviceStore.setAddDeiviceFormVisible()
  ElMessage.error("设备添加失败")

}

</script>

<template>
  <div>
      <el-dialog title="添加设备" width="900"  v-model="deviceStore.addDeiviceFormVisible">
        <div class="form-container">
          <div class="device-left">
              <div class="left-back">
              </div>
          </div>

        <el-form label-width="400px" label-position="top" style="max-width: 800px;">
          <el-form-item label="设备识别码">
              <el-input v-model="deviceInformation.identificationCode"></el-input>
          </el-form-item>

          <el-form-item label="设备名称">
            <el-input v-model="deviceInformation.deviceName"></el-input>
          </el-form-item>

          <el-form-item label="设备位置">
            <el-select v-model="deviceInformation.roomId" placeholder="请选择">
              <el-option
                  v-for="item in roomOptions"
                  :key="item.roomId"
                  :label="item.roomName"
                  :value="item.roomId"
                ></el-option>
              </el-select>
          </el-form-item>

          <el-form-item label="设备类型">
            <el-select v-model="deviceInformation.deviceType" placeholder="请选择">
                <el-option
                  v-for="item in deviceTypeOptions"
                  :key="item.deviceType"
                  :label="item.deviceTypeName"
                  :value="item.deviceType"
                ></el-option>
              </el-select>
          </el-form-item>

          <el-form-item label="房间集合设备">
            <el-select v-model="deviceInformation.roomDeviceId" placeholder="请选择">
                <el-option
                  v-for="item in roomDeviceCollections"
                  :key="item.roomDeviceId"
                  :label="item.deviceCollectionName"
                  :value="item.roomDeviceId"
                ></el-option>
              </el-select>
          </el-form-item>


          <el-form-item>
            <el-checkbox v-model="showOnPage">在我的家看板页面显示</el-checkbox>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
      <div class="dialog-footer">
        <el-button @click="deviceStore.setAddDeiviceFormVisible">取消</el-button>
        <el-button type="primary" @click="addDeviceData">
          添加设备
        </el-button>
      </div>
    </template>
      </el-dialog>

  </div>
</template>

<style lang="scss" scoped>
:deep(.el-input__inner){
  width: 246px;
}

:deep(.el-dialog) {
  background-color: rgb(47, 59, 82);
}

:deep(.el-dialog__title){
    color:white;
    margin-left: 50px;
  }


.form-container {
  display: flex;
  justify-content: space-around;
  // padding: 0px 100px 0 100px;
  align-items: center;
  .device-left{
    display: flex;
    .left-back{
      width: 300px;
      height: 250px;
      background-color: #20293c;
    }
  }

}

</style>
